<template>
    <div class="userInfo">
      <div class="userInfoItem">
        <el-tooltip class="item" effect="dark" content="有意见请联系我 janams-cromwell@outlook.com" placement="bottom">
          <i class="el-icon-news"></i>
        </el-tooltip>
      </div>

      <div class="userInfoItem">
        <el-tooltip class="item" effect="dark" content="这里将来要有个通知" placement="bottom">
          <i class="el-icon-bell"></i>
        </el-tooltip>
      </div>

      <el-avatar :src="$store.state.userInfo.avatar?$store.state.userInfo.avatar:defaultAvatar" style="margin:0 15px;"></el-avatar>

      <el-dropdown @command="handleCommand">
          <span class="el-dropdown-link">
            {{ $store.state.userInfo.nickname }}<i class="el-icon-caret-bottom el-icon--right"></i>
          </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item command="userinfo">个人信息</el-dropdown-item>
            <el-dropdown-item command="updatePasswd">修改密码</el-dropdown-item>
            <el-dropdown-item divided command="logout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>

    </div>
</template>

<script>
export default {
  name: "Header",
  data() {
    return {
      nickname: '',
      defaultAvatar: require('@/assets/images/avatar.png')
    };
  },
  methods: {
    logout() {
    },
    userinfo() {
    },
    showUpdatePwd() {
    },
    handleCommand(command) {
      switch (command) {
        case 'userinfo':
          this.userinfo();
          break;
        case 'updatePwd':
          this.showUpdatePwd();
          break;
        case 'logout':
          this.logout();
          break;
      }
    }
  }
}
</script>

<style scoped>
.userInfo {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.userInfoItem {
  margin: 0 8px;
  color: #666666;
  cursor: pointer;
}

.userInfoItem:last-of-type {
  margin-right: 20px;
}

.userInfoItem:hover {
  color: #007aff;
}

.el-avatar {
  background: #FFFFFF !important;
  border: 1px solid #DCDFE6;
}
</style>
